<template>
	<view class="page-business">
		<view class="b-w inner">
			<u--form
					labelPosition="left"
					:model="formData"
					:rules="rules"
					ref="uForm"
				>
				<u-form-item
						label="标题"
						prop="title"
						ref="item1">
					<u--input
							v-model="formData.title"
							placeholder="请输入标题"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="专家"
						prop="professionalUser"
						ref="item1"
						@click="showProfessional = true"
				>
					<u--input
							v-model="formData.professionalUser"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择专家"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						label="企业"
						prop="enterpriseUser"
						ref="item1"
						@click="showEnterprise = true"
				>
					<u--input
							v-model="formData.enterpriseUser"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择企业"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
			</u--form>
			<view class="confirm-btn">
				<u-button type="primary" text="提交" @click="submitMeta"></u-button>
			</view>
		</view>
		<qianziyu-select
			:show="showProfessional" 
			type="radio"
			placeholder="请输入专家"
			:dataLists="professionalLists"
			:data-id="1"
			@cancel="showProfessional=false"
			@search="getProfessionalList"
			@submit="submitProfessional">
		</qianziyu-select>
		<qianziyu-select
			:show="showEnterprise" 
			type="radio"
			placeholder="请输入企业"
			:dataLists="enterpriseLists"
			@cancel="showEnterprise=false"
			@search="getEnterpriseList"
			@submit="submitEnterprise">
		</qianziyu-select>
	</view>
</template>

<script>
	import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue'
	export default{
		components: {qianziyuSelect},
		data() {
			return {
				showSex: false,
				showProfessional: false,
				showEnterprise: false,
				professionalLists: [],
				enterpriseLists: [],
				formData: {
					title: '',
					enterpriseUser: '',
					professionalUser: '',
					professionalUserId: '',
					enterpriseUserId: ''
				},
				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
					professionalUser: {
						type: 'string',
						required: true,
						message: '请选择专家',
						trigger: ['blur','change']
					},
					enterpriseUser: {
						type: 'string',
						required: true,
						message: '请选择企业',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad() {
			this.getProfessionalList()
			this.getEnterpriseList()
		},
		onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			sexSelect(e) {
				this.formData.expert = e.name
				this.$refs.uForm.validateField('expert')
			},
			getProfessionalList(keyword = '') {
				this.$request('/user/professionalUserList', {
					keyword: keyword
				}).then((res) => {
					this.professionalLists = res.result.map(item => {
						return {
							id: item.userId,
							name: item.name
						}
					})
				})
			},
			getEnterpriseList(keyword = '') {
				this.$request('/user/enterpriseUserList', {keyword}).then((res) => {
					this.enterpriseLists = res.result.map(item => {
						return {
							id: item.userId,
							name: item.enterpriseName
						}
					})
				})
			},
			submitProfessional(e) {
				this.$set(this.formData, 'professionalUser', e.name)
				// this.formData.professionalUser = e.name
				this.formData.professionalUserId = e.id
				this.showProfessional = false
				
			},
			submitEnterprise(e) {
				this.formData.enterpriseUser = e.name
				this.formData.enterpriseUserId = e.id
				this.showEnterprise = false
				
			},
			submitMeta() {
				this.$refs.uForm.validate().then(res => {
					this.$request('/talentMatch/talentMatch', {
						title: this.formData.title,
						enterpriseUserId: this.formData.enterpriseUserId,
						professionalUserId: this.formData.professionalUserId
					}).then((res) => {
						this.$utils.toast('创建成功！')
						setTimeout(() => {
							uni.navigateBack({})
						}, 1500)
					})
				}).catch(errors => {
					uni.$u.toast('请完善信息后提交')
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirm-btn{
		margin-top: 20rpx;
	}
	.page-business{
		padding: 20rpx;
		.inner{
			border-radius: 10rpx;
			padding: 20rpx;
			.header-my{
				border-bottom: 1rpx solid #c8c7cc;
				padding-bottom: 20rpx;
				.title{
					
				}
			}
		}
	}
</style>